<template>
  <div class="reportcharts">
    <h2>{{title}}</h2>
    <div class="echardiv">
      <div
        class="repecharts"
        :id="echartsId"
      ></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .reportcharts {
    width: 100%;
    height: 570px;
    background: #fff;
    padding: 15px 10px 20px 35px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 17px;
      letter-spacing: 1px;
      margin-bottom: 20px;
    }
    .echardiv{
      width: 100%;
      height: 520px;
    }
    .repecharts {
      width: 100%;
      height: 520px;
    }
  }
</style>

<script>
  let echarts = require("echarts");
  let moment = require("moment");
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  let unit = reportGlobal.unit;
  let colorList = reportGlobal.colorList;
  export default {
    props:{
      echartData:{
        default:function () {
          return {}
        }
      },
    },
    data() {
      return {
        Echarts:null,
        echartsId:
          Number(
            Math.random()
            .toString()
            .substr(3, 15) + Date.now()
          ).toString(36) + "Echarts",
        color: ['#7148e7','#a72ae4','#ff6a54','#ffe451','#5af8ae','#ffb73e','#0076e1','#cc74e6','#00c4e1','#bbde2b'],
        option:{
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          color:['#7148e7','#a72ae4','#ff6a54','#ffe451','#5af8ae','#ffb73e','#0076e1','#cc74e6','#00c4e1','#bbde2b'],
          legend: {
            width:'80%',
            type: 'scroll',
            left:'center',
            top: 20,
            padding:[20,0],
            data: []
          },
          grid: {
            top:'20%',
            left:'40%'
          },
          xAxis: {
            show: false
          },
          yAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            data: []
          },
          series: [
          ]
        },
        title:'业态分析数据',
        defaultEcharts:{            //默认样式与无数据图片
          title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 70,
            x2: "8%"
          },
          backgroundColor:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#f5f8fe' // 0% 处的颜色
            }
            ],
            global: false // 缺省为 false
          },

          series: []
        },
      }
    },
    created(){

    },
    mounted(){
      this.Echarts = echarts.init(document.getElementById(this.echartsId));
    },
    methods:{
      upData(data,kpi,title){
        this.title = title
        if(data == false){
          this.loadEchart(this.defaultEcharts);
          return
        }
        this.option.legend.data = [];
        this.option.series = [];

        let pieObj = {
          type:'pie',
          minAngle:1,
          top:'middle',
          left:20,
          radius:['25%','50%'],
          center:['20%','50%'],
          label:{
            formatter: '{b}:{d}%',
          },
          itemStyle: {
            borderWidth:2,
            borderColor:'#fff'
          },
          data:[],
        }
        for(let i = 0; i < data.tag_name_arr.length; i++){
          let dataValue = data.value[i][kpi];//当前数据
          let obj = {
            name: data.tag_name_arr[i],
            type: 'bar',
            barMaxWidth: '20px',
            barMinHeight: 10,
            barCategoryGap:'10',
            label: {
              position: 'right',
              formatter: '{a}:   {c}',
              fontSize: 16,
              show: true,
            },
            itemStyle:{
              color:this.color[i % 10],
            },
            data: [dataValue]
          }
          pieObj.data.push({name:data.tag_name_arr[i],value:dataValue})
          // this.option.xAxis.data.push('demo' + i)
          this.option.legend.data.push(data.tag_name_arr[i])
          this.option.series.push(obj)
          this.option.series.push(pieObj)
        }
        // console.log(this.option,'option');
        this.loadEchart(this.option);
      },
      loadEchart(option) {
        this.Echarts.setOption(option, true);
      },
    }
  }
</script>

